<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OHOLEO KEYBOARD</title>
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />

    <!-- Material Dashboard CSS -->
    <link rel="stylesheet" href="public/assets/css/material-dashboard.css">


    <link data-trunk rel="copy-dir" href="public" />
    <link data-trunk rel="rust" data-wasm-opt="z" />
    <link data-trunk rel="css" href="/style/output.css" />
    <link data-trunk rel="copy-file" href="vercel.json" />







    <style>
      .ripple {
	  position: absolute;
	  width: 10px;
	  height: 10px;
	  animation-name: ripple;
	  animation-duration: 2s;
	  opacity: 0;
	  border-radius: 50%;
      }

      @keyframes ripple {
	  
	  0% {
	      opacity: .2;
	      transform: scale(0);
	      background: #000;
	  }
	  
	  100% {
	      opacity: 0;
	      transform: scale(100);
	      background: #000;
	  }
      }
      
      .keycap-border {
	  display: inline-block;
	  color: #000000;
	  text-align: center;
	  text-decoration: none;
	  font-size: 16px;
	  vertical-align: top;
      }
      
      .keybutton {
	  padding: 0 0;
	  height: 100%;
	  border: 2px solid #F99FB8;
	  border-radius: 5px;
	  color: white;
	  text-align: center;
	  text-decoration: none;
	  font-size: 16px;
	  transition-duration: 0.2s;
	  cursor: pointer;
      }

      .keybutton:hover, .keybutton.active{
	  background-color: #F99FB8;
	  color: white;
	  transform: scale(.9);
      }
      
      .keyrow {
	  display: flex;
	  overflow: scroll;


      }

      .slidecontainer {
	  width: 100%; /* Width of the outside container */
      }
      
      .slider {
	  -webkit-appearance: none;
	  width: 100%;
	  height: 15px;
	  border-radius: 5px;  
	  background: #d3d3d3;
	  outline: none;
	  opacity: 0.7;
	  -webkit-transition: .2s;
	  transition: opacity .2s;
      }

      .slider::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  appearance: none;
	  width: 25px;
	  height: 25px;
	  border-radius: 50%; 
	  background: #913f9e;
	  cursor: pointer;

	  
      }
      

      .slider::-moz-range-thumb {
	  width: 25px;
	  height: 25px;
	  border-radius: 50%;
	  background: #913f9e;
	  cursor: pointer;
      }


      

    </style>

    
  </head>
  <body class="dark-edition">

  
	
  </body>
</html>
